<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #title="{ record }">
        <a-link color="blue" @click="crudRef.editAction(record)">{{ record.title }}</a-link>
      </template>
      <template #tableButtons>
        <a-button type="primary" @click="crudRef.addAction()" v-auth="['finance:bonusBill:save']">
          <template #icon>
            <icon-plus/>
          </template>
          新增
        </a-button>
        <a-button v-if="changeStatus == 0" v-auth="['finance:bonusBill:cancel']" type="primary" status="danger" @click="cancel()">
          <template #icon>
            <icon-close/>
          </template>
          作废
        </a-button>
      </template>
    </ma-crud>
    <SellerList v-model="visible.shipment"/>
    <BaseInfo ref="baseInfo" />
    <batch-action-modal 
    :crud-ref="crudRef"
    :selected="selected"
    ref="batchActionRef"
    ></batch-action-modal>
  </div>
</template>
<script setup>
import { ref, reactive,provide ,computed} from 'vue'
import bonusBill from '@/api/finance/bonusBill'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import SellerList from "./SellerList.vue";
import BaseInfo from "./info.vue";
import BatchActionModal from "@cps/actions/batchActionModal.vue";

const selected = computed(() => crudRef.value?.selecteds)
const batchActionRef = ref()
const changeStatus = ref('1')
const cancel = () =>{
  batchActionRef.value.open({
    title:'作废',
    api: bonusBill.cancel,
    displayDataIndex:'bill_no',
  })
}
const visible = ref({
  shipment: false,
})

const baseInfo = ref()

const crudRef = ref()

const options = reactive({
  id: 'bonus_bill',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  contextMenu: {
    // 是否开启右键菜单
    enabled: true,
  },
  isDbClickEdit: false,
  // operationColumn: true,
  // operationColumnWidth: 160,
  formOption: {
    viewType: 'drawer',
    width: 600
  },
  tabs:{
    dataIndex:'status',
    data:[
      {label:'正常',value:0},
      {label:'作废',value:1},
    ],
    onChange:(value)=>{
      changeStatus.value = value
    }
  },
  api: bonusBill.getList,
  add: {
    show: true,
    api: bonusBill.save,
    auth: ['finance:bonusBill:save'],
    action:()=>{
      visible.value.shipment = true
    }
  },
  edit: {
    show: true,
    api: bonusBill.update,
    auth: ['finance:bonusBill:update'],
    action:(record)=>{
      baseInfo.value.onShow(record)
    }
  },
  afterEdit:(response)=>{
    if (response.success) {
      baseInfo.value.getRecord()
    }
  },
  delete: {
    show: false,
    api: bonusBill.deletes,
    auth: ['finance:bonusBill:delete']
  }
})

const columns = reactive([
  {
    title: "id",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入id"
    }
  },
  {
    title: "批次号",
    dataIndex: "bill_no",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    search: true,
    commonRules: {
      required: true,
      message: "请输入批次号"
    }
  },
  {
    title: "标题",
    dataIndex: "title",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入标题"
    }
  },
  {
    title: "销售",
    dataIndex: "user_id",
    formType: "select",
    virtualListProps:{},
    dict: {
      url: 'system/user/list',
      props: {label: 'nickname', value: 'id'},
      translation: true,
      params:{select: 'id,nickname'}
    },
    addDisplay: false,
    editDisplay: false,
    search: true,
    commonRules: {
      required: true,
      message: "请输入销售"
    }
  },
  {
    title: "比例(%)",
    dataIndex: "radio",
    formType: "input",
    // search: true,
    commonRules: {
      required: true,
      message: "请输入比例"
    }
  },
  {
    title: "毛利总额",
    dataIndex: "total_amount",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入毛利总额"
    }
  },
  {
    title: "可提成总额",
    dataIndex: "bonus_amount",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入可提成总额"
    }
  },
  {
    title: "业务区间",
    dataIndex: "date",
    formType: "range",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入状态"
    }
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    // hide: true,
    showTime: true
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "textarea",
    addDisplay: false,
    // hide: true
  }
])
provide('crudRef', crudRef)
</script>
<script> export default { name: 'finance:bonusBill' } </script>